<template>
  <div id="inputSearch" :class="changeFlag ? 'top-to' : 'top-from'">
    <!--  搜索-->
    <div class="search-main" style="" @mouseleave="handleMouseleave">
      <el-row>
        <el-col
          :span="2"
          style="display: flex; flex-direction: column; justify-content: center"
        >
          <span style="margin-left: 10px; font-size: 12px">商品 |</span>
        </el-col>
        <el-col
          :span="16"
          style="display: flex; flex-direction: column; justify-content: center"
          @click="handleFocus"
          @focusout="inputVisible = false"
        >
          <el-carousel
            v-if="!inputVisible"
            :interval="2000"
            direction="vertical"
            height="32px"
            indicator-position="none"
          >
            <el-carousel-item
              v-for="item in hostList"
              :key="item"
              style="
                display: flex;
                flex-direction: column;
                justify-content: center;
              "
            >
              <div>
                <el-text type="info">{{ item }}</el-text>
              </div>
            </el-carousel-item>
          </el-carousel>
          <div
            v-else
            ref="input"
            contenteditable
            style="border: none; font-size: 12px"
            @keydown="handleKeyDown()"
          ></div>
        </el-col>
        <el-col :span="6">
          <el-button
            style="width: 100%; border-radius: 16px"
            type="primary"
            @click="handleSearch"
            >搜索
          </el-button>
        </el-col>
      </el-row>
      <div
        v-show="!mouseLeaveFlag"
        style="font-size: 12px; padding: 2px; margin-top: 10px"
      >
        <!-- 历史搜索-->
        <div style="margin: 12px">
          <el-row>
            <el-col :span="20">
              <span style="font-size: 12px; font-weight: bolder">历史搜索</span>
            </el-col>
            <el-col :span="4">
              <el-space :size="4" class="text" @click="handleDelAllHistory">
                <span class="icon-shoucang el-icon"></span>
                <span>清除全部</span>
              </el-space>
            </el-col>
          </el-row>
          <div style="margin: 5px 0">
            <el-space v-if="searchList.length > 0" wrap>
              <el-tag
                v-for="item in searchList"
                :key="item"
                closable
                size="small"
                @click="toSearch(item)"
                @close="handleHistoryDel(item)"
              >
                {{ item }}
              </el-tag>
            </el-space>
            <div v-else style="text-align: center; font-size: 10px">
              <el-text type="info">暂无搜索记录</el-text>
            </div>
          </div>
        </div>
        <!--猜你想搜-->
        <div style="margin: 20px 12px">
          <el-row>
            <el-col :span="20">
              <span style="font-size: 12px; font-weight: bolder">最新热搜</span>
            </el-col>
            <!--<el-col :span="4">-->
            <!--  <el-space :size="4" @click="handleDelAllHistory" class="text">-->
            <!--    <span class="icon-shumapeijian el-icon"></span>-->
            <!--    <span>换一换</span>-->
            <!--  </el-space>-->
            <!--</el-col>-->
          </el-row>
          <el-row style="margin-top: 10px">
            <div style="width: 100%">
              <el-row :gutter="5">
                <el-col
                  v-for="(str, index) in hostList"
                  :key="str"
                  :span="8"
                  style="margin-bottom: 10px"
                >
                  <span class="top-span">
                    <el-tag
                      :type="getType(index + 1)"
                      style="width: 10%; margin-right: 10px; text-align: center"
                      >{{ index + 1 }}</el-tag
                    >
                    <span @click="toSearch(str)">
                      {{ str }}
                    </span>
                  </span>
                </el-col>
              </el-row>
            </div>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, ref } from "vue";
import { useSearchStore } from "@/store";
import { useRouter } from "vue-router";
import { GoodsControllerService } from "@/api";

const inputVisible = ref(false);
const input = ref("");
const useSearch = useSearchStore();
const searchList = ref<string[]>([]);

//得到出入框焦点
function handleFocus() {
  inputVisible.value = true;
  nextTick(() => {
    if (input.value) {
      //渲染后获取焦点
      input.value.focus();
      // 打开历史记录
      mouseLeaveFlag.value = false;
      //获取历史记录
      searchList.value = useSearch.getSearchHistory();
    }
  });
}

//回车事件
function handleKeyDown() {
  if (window.event && window.event.keyCode == 13) {
    window.event.returnValue = false;
    handleSearch();
  }
}

//鼠标移除
const mouseLeaveFlag = ref(true);

function handleMouseleave() {
  mouseLeaveFlag.value = true;
}

//删除历史记录
function handleHistoryDel(str: string) {
  useSearch.delSearch(str);
  //重新获取历史记录
  searchList.value = useSearch.getSearchHistory();
}

//删除全部历史记录
function handleDelAllHistory() {
  useSearch.delAllSearch();
  //重新获取历史记录
  searchList.value = useSearch.getSearchHistory();
}

const router = useRouter();

//处理查询
function handleSearch() {
  if (input.value) {
    //添加历史记录
    const keyword = input.value.innerHTML;
    useSearch.addSearch(keyword);
    nextTick(() => {
      //关闭输入框
      router.push({
        path: "/search",
        query: {
          keyword: keyword,
        },
      });
      inputVisible.value = false;
    });
  }
}

//前往搜索
function toSearch(keyword: string) {
  //添加历史记录
  useSearch.addSearch(keyword);
  // 跳转到路由
  router.push({
    path: "/search",
    query: {
      keyword: keyword,
    },
  });
}

//判断是否要切换高度
const changeFlag = ref();
const handleScroll = () => {
  const flag = document.documentElement.scrollTop > 75;
  nextTick(() => {
    changeFlag.value = flag;
  });
};
// 获取热搜
const hostList = ref<string[]>([]);

function getHostList() {
  GoodsControllerService.getHostUsingGet().then((res) => {
    hostList.value = res.data || [];
  });
}

getHostList();

// 排行榜标签类型
function getType(index: number) {
  switch (index) {
    case 1:
      return "danger";
    case 2:
      return "warning";
    case 3:
      return "primary";
    case 4:
      return "success";
    default:
      return "info";
  }
}

onMounted(() => {
  document.addEventListener("scroll", handleScroll, true);
});
onUnmounted(() => {
  document.removeEventListener("scroll", handleScroll, true);
});
</script>

<style lang="scss" scoped>
#inputSearch {
  width: 80%;
  margin: 0 auto;
  position: fixed;
  top: 75px;
  z-index: 100;

  .search-main {
    width: 50%;
    margin: 0 auto;
    border: solid 1px #409eff;
    padding: 2px;
    border-radius: 16px;
    background-color: #ffffff;

    .top-span {
      font-size: 12px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      border-bottom: solid 1px #ffffff;

      span:hover {
        color: #409eff;
        border-bottom: solid 1px #409eff;
      }
    }
  }
}

.text:hover {
  color: #409eff;
}

:deep(.chat-rich-text) {
  padding: 0;
}

:deep(.chat-placeholder-wrap) {
  padding: 0;
  font-size: 16px !important;
}

/* 定义一个关键帧动画 */
@keyframes changeTo {
  from {
    top: 75px;
  }
  to {
    top: 10px;
  }
}

@keyframes changeFrom {
  from {
    top: 10px;
  }
  to {
    top: 75px;
  }
}

/* 应用动画到一个带有 .animated-element 类的元素，并保持动画结束后的状态 */
.top-to {
  animation: changeTo 2s forwards;
}

.top-from {
  animation: changeFrom 2s forwards;
}

/*可编辑div取消边框样式*/
[contenteditable] {
  outline: 1px solid transparent;
  border: 1px solid #fff;
  width: 100%;
}

[contenteditable]:focus {
  border: 1px solid #00c0ef;
  border-radius: 3px;
}
</style>
